<template>
  <div class="swiper-container">
    <swiper class="swiper" :modules="modules" :slides-per-view="1" :loop="true" :pagination="{
      clickable: true
    }" :autoplay="{ delay: 2500, disableOnInteraction: false }">
      <swiper-slide class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src="item.image"/>
      </swiper-slide>
      <swiper-pagination slot="pagination" />
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

// 注册Swiper模块
const modules = [Pagination, Autoplay];

// 轮播图
import {getBrList} from "../../api/banner"
const bannerList = ref();
const getbannerList = async () => {
  const {
    data: { data },
  } = await getBrList();
  // console.log(data);
  bannerList.value = data;
  // console.log(bannerList);
};
getbannerList()
</script>

<style scoped lang="scss">
.swiper-container {
  @media (max-width: 468px) {
    margin: 0;
    height: 200px;
  }

  margin-top: 50px;
  width: 100%;
  height: 700px;

  .swiper {
    width: 100%;
    height: 100%;

    .swiper-slide {
      width: 100% !important;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>